<template>
	<view class="hm-p-b-100">
		<view v-if="order" class="hm-p-lr-20">
			<u-sticky offsetTop="0"  customNavHeight="0">
				<view class="hm-p-t-20">
					<u-subsection :list="tabList" bgColor="#fdf6ec" :current="tabN" activeColor="#ff9900" inactiveColor="#909193" mode="subsection" @change="actTap"></u-subsection>
				</view>
			</u-sticky>
			<!-- 商品列表 -->
			<view class="hm-p-lr-20 hm-m-t-20 hm-bg-f hm-br-8">
				<view v-for="(item, index) in order.goods" :key="index" class="goods-list">
					<image :src="item.image.url" />
					<view  v-if="tabN==0" class="selectNumber hm-fr">
						<view @click="item.refund_num>0?edit('dec',index):''"
							:class="'default left  ' + (item.refund_num>0?'':' default-active')">-</view>
						<view class="num">{{item.refund_num}}</view>
						<view @click="item.total_num>item.refund_num?edit('inc',index):''"
							:class="'default right  ' + (item.total_num>item.refund_num>0?'':' default-active')">+</view>
					</view>
					<view  v-else class="hm-dis-block-inline hm-fr hm-col-error">
						退 × {{item.total_num}}
					</view>
					<view style="padding-left: 30rpx;">
						<view class="hm-line-1 hm-font-30">{{item.goods_name}}</view>
						<view v-if="item.goods_attr" class="hm-line-1 hm-col-tips hm-font-26">{{item.goods_attr}}</view>
						<view class="hm-dis-block-inline hm-font-26 hm-col-error">
							￥{{item.goods_price}}
							<text class="hm-m-l-10 hm-col-tips">× {{item.total_num}}</text>
						</view>
					</view>
				</view>
				<view class="hm-p-tb-20 hm-text-right">
					共{{order.goods.length}}种商品，合计：<text class="hm-col-error">￥{{order.total_price}}</text>
				</view>
			</view>
			<!-- 费用清单 -->
			<view class="hm-br-8 hm-bg-f hm-m-t-20">
				<view class="hm-p-20 hm-border-b">费用清单</view>
				<view class="hm-p-20 hm-border-b hm-col-tips">
					实付金额：<text class="hm-col-error hm-fr">￥{{order.pay_price}}</text>
				</view>
				<view v-if="order.delivery_price>0" class="hm-p-20 hm-border-b hm-col-tips">
					配送费用：<text class="hm-col-error hm-fr">+￥{{order.delivery_price}}</text>
				</view>
				<view v-if="order.pack_price>0" class="hm-p-20 hm-border-b hm-col-tips">
					包装费用：<text class="hm-col-error hm-fr">+￥{{order.pack_price}}</text>
				</view>
				<view v-if="order.activity_price>0" class="hm-p-20 hm-border-b hm-col-tips">
					优惠金额：<text class="hm-col-error hm-fr">-￥{{order.activity_price}}</text>
				</view>
				<view class="hm-p-20 hm-border-b hm-col-tips">
					退款金额：<text class="hm-col-error hm-fr">￥{{refund_price}}</text>
				</view>
				<view class="hm-p-20 hm-col-tips">
					退款理由：
					<view class="hm-dis-block-inline">
						<u--input v-model="desc" placeholder="请输入退款理由" border="none"></u--input>
					</view>
				</view>
			</view>
			<!-- 技术支持 -->
			<view class="hm">
				{{applet.copyright}} <text class="v">V{{applet.version}}</text>
			</view>
			<!-- 提交订单 -->
			<view class="hm-footer-fixed">
				<view class="hm-p-lr-b25 hm-w-b100">
					<u-button @click="submit" type="success" text="提交申请"></u-button>
				</view>
			</view>
		</view>
		<!-- 快捷导航 -->
		<shortcut></shortcut>
	</view>
</template>

<script>
	let App = getApp();

	export default {
		data() {
			return {
				applet:{},
				tabList: [{
					name: '退部分',
					value: 10
				}, {
					name: '退全部',
					value: 20
				}],
				tabN: 0,
				order_id: null,
				order: null,
				refund_price: '0.00',//退款金额
				tpl: '', //退款状态提醒
				desc:'',	//退款理由
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let _this = this;
			_this.order_id = options.id;
			_this.getOrderDetail();
			_this.getTpl();
			_this.applet = uni.getStorageSync('applet');
		},
		methods: {
			/**
			 * 获取订阅消息配置
			 */
			getTpl: function() {
				let _this = this;
				App._get('setting/tpl', {
					order_mode: 'refund'
				}, function(result) {
					_this.setData(result.data);
				});
			},
			
			/**
			 * 修改退款订单
			 */
			edit:function(mode,index) {
				let _this = this,
					order = _this.order;
				if (mode == 'inc') {
					_this.order.goods[index].refund_num = order.goods[index].refund_num + 1;
				} else {
					_this.order.goods[index].refund_num = order.goods[index].refund_num - 1;
				}
				App._get('user.refund/edit', {
					order_id: order.order_id,
					mode: mode,
					index: index
				}, function(result) {
					_this.refund_price = result.data;
				});
			},

			/**
			 * 切换退款模式
			 */
			actTap: function(index) {
				let refund_price = '0.00';
				this.tabN = index;
				if (index == 1) {
					this.refund_price = this.order.pay_price;
				} else {
					this.refund_price = '0.00';
					this.getOrderDetail();
				}
			},			

			/**
			 * 获取订单详情
			 */
			getOrderDetail: function() {
				let _this = this;
				App._get('user.refund/detail', {
					order_id: _this.order_id
				}, function(result) {
					_this.setData(result.data);
				});
			},

			/**
			 * 订单提交
			 */
			submit: function() {
				let _this = this;
				if (_this.refund_price == 0) {
					App.showError('退款金额不可为0');
					return false;
				}
				if (_this.desc == '') {
					App.showError('退款理由不可为空');
					return false;
				}
				// #ifdef H5
				// 提交到后端
				App._post_form('user.refund/refund', {
					desc:_this.desc,
					mode:_this.tabN,
					order_id:_this.order_id
				}, function(result) {
					App.showSuccess(result.msg, function() {
						uni.navigateBack();
					});
				});
				// #endif
				// #ifdef MP-WEIXIN
				uni.requestSubscribeMessage({
					tmplIds: _this.tpl,
					complete(res) {
						// 提交到后端
						App._post_form('user.refund/refund', {
							desc:_this.desc,
							mode:_this.tabN,
							order_id:_this.order_id
						}, function(result) {
							App.showSuccess(result.msg, function() {
								uni.navigateBack();
							});
						});
					}
				});
				// #endif
			},

		}
	};
</script>
<style lang="scss" scoped>
	.goods-list{
		padding: 10rpx 0rpx;
		border-bottom: 1rpx solid #f3f4f6;
		height: 120rpx;
		image{
			height: 120rpx;
			width: 120rpx;
			border-radius: 8rpx;
			float: left;
			margin-right: 20rpx;
		}
	}
</style>
